(function($) {
    $.fn.connection_container = function() {
        var url_img_wait = '/images/wait.gif';
        var url_img_refresh = '/images/refresh.png';
        var container_id = $(this).attr('id');

        function parse_ajax_response(data) {
            $('div.text_content', '#'+container_id).remove();
            $('div.title_content', '#'+container_id).remove();
            
            if (data.length > 0) {
                $('#'+container_id).append(
                    '<div class="line title_content">'
                        +'<div class="element">'
                        +'Type'
                        +'</div>'
                        +'<div class="element">'
                        +'Last Time Seen'
                        +'</div>'
                        +'<div class="element">'
                        +'MAC Address'
                        +'</div>'
                        +'</div>'
                );

                for (var i=0; i<data.length; i++) {
                    $('#'+container_id).append(
                        '<div class="line text_content">'
                            +'<div class="element">'
                            +data[i].type+' '
                            +'</div>'
                            +'<div class="element">'
                            +data[i].lts+' '
                            +'</div>'
                            +'<div class="element">'
                            +data[i].mac
                            +'</div>'
                            +'</div>'
                    );
                }
            }
            else {
                $('#'+container_id).append('<div class="text_content">No connections stored on server.</div>');
            }
        }

        $(this).html(
            '<div class="dashboard_subtitle">'
                +'Connections'
                +'</div>'
                +'<div id="map" class="text_content">'
                +'<img src="'+url_img_wait+'" class="img_wait" />'
                +'</div>'
        );

        $.getJSON('/ajax/connections/get', function(data) {
            $('div.dashboard_subtitle', '#'+container_id).prepend(
                '<div class="div_refresh">'
                    +'<img src="'+url_img_refresh+'" class="img_refresh" />'
                    +'</div>'
            );

            $('img.img_refresh', 'div.dashboard_subtitle', '#'+container_id).click(function() {
                if ($(this).attr('src') == url_img_refresh) {
                    $(this).attr('src', url_img_wait);

                    $.getJSON('/ajax/connections/get', function(data) {
                        $('.img_refresh', '#'+container_id).attr('src', url_img_refresh);
                        parse_ajax_response(data);
                    });
                }
            });

            parse_ajax_response(data);
        });
    };
})(jQuery);